<template>
    <div id="lyh-select">
        <div class="selectWarp" @click="isshow=true">
            <div class="select">
                {{changeData.name}}
            </div>
            <div v-if="isshow" class="selectList">
                <ul>
                    <li v-for="(v,index) in selsetList" :key="index" @click.stop="lisChange(v.code,v.name)">{{v.name}}</li>
                </ul>
            </div>
            <div v-else class="selectList"></div>
        </div>
    </div>
</template>
<script>
    export default {
    props:{
        // 当前选择的值
        changeData:{
            type:Object,
            default:()=>{}

        },
        // 列表
        selsetList:{
            type:Array,
            default:()=>[]
        }
        
    },
    data() {  
        return {
            isshow:false,
        };
    },
    methods: {
        lisChange(code,name){
            this.isshow = false;
            this.changeData.name = name;
            this.changeData.code = code;
            this.$emit('changeDataFn',this.changeData);
        }
    },
    mounted(){
    },
    watch:{},
    beforeRouteLeave(to, from, next) {
    next();
    },
    components: {

    }
    }
</script>
<style lang="less" scoped>
#lyh-select{
    ul,li{
        list-style: none;
        border-radius: 2px;
        padding: 0;
        margin: 0;
       
    }
    .selectWarp{
        height: 30px;
        line-height: 30px;
        width: 200px;
        border: 1px solid #ddd;
        border-radius: 3px;
        .select{
            padding-left: 12px;
        }
    }
    .selectList{
        margin-top: 10px;
        background: #eee;
        max-height: 200px;
        position: relative;
        z-index: 99999;
        overflow-y: auto;
        li{
            padding-left: 10px;
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #fff;
            cursor: pointer;
        }
        li:hover{
            background: #ddd;
        }
    }
}
</style>